<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/getURLParam.js"></script>
		<script type="text/javascript" charset="utf-8"></script>
		<style>
			p {
				text-indent: 22px;
				padding: 0px;
			}
			
			html,
			body,
			.mui-content {
				background-color: #fff;
			}
			
			h4 {
				margin-left: 5px;
			}
			
			.mui-plus header.mui-bar {
				display: none;
			}
			
			.mui-plus .mui-bar-nav~.mui-content {
				padding: 0;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" >
		    <div class="mui-content-padded" style="text-align: center;margin: 0px;">
		        <button type="button" class="mui-btn mui-btn-primary  " id="red"style="height: 45px;width:23%;font-size:12px;"  onclick="getredflt()">红色故障</button>
		        <button type="button" class="mui-btn mui-btn-primary  mui-btn-outlined" id="yellowp" style="height: 45px;width:23%;font-size:12px;" onclick="getyellpflt()">黄色故障<br/>(可能降扭)</button>
		        <button type="button" class="mui-btn mui-btn-primary  mui-btn-outlined" id="yellown" style="height: 45px;width:23%;font-size:12px;" onclick="getyellnflt()">黄色故障<br/>(不会降扭)</button>
		        <button type="button" class="mui-btn mui-btn-primary  mui-btn-outlined" id="other" style="height: 45px;width:23%;font-size:12px;" onclick="getotherflt()">其他故障</button>
		        <input type="hidden" value="1" id="redt" />
		        <input type="hidden" value="0" id="redyp" />
		        <input type="hidden" value="0" id="redyn" />
		        <input type="hidden" value="0" id="redo" />	 
		    </div>
		     <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="margin-top:50px">
				<div class="mui-scroll" id="fltTop">
					<ul class="mui-table-view" id='curtFlt'>
					</ul>
				</div>
			</div>
		</div>
		
	</body>
<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: { 
						contentrefresh: '正在加载...',
						callback: pullupRefresh,
						auto:true
					}
				},
				 gestureConfig:{
				   tap: true, //默认为true
				   doubletap: false, //默认为false
				   longtap: true, //默认为false
			  	}
			});
			 var sessionid=GetQueryString("sessionid");
	        var accountid=GetQueryString("accountid");
	        var proversion=GetQueryString("proversion");
	        var pagerCount=10;//页码
	        var pagerStart=10;//开始长度
	        var fltpagerCode=0;//故障页码
	        var isRedFlt=GetQueryString("isRedFlt");
	        var isYemFlt=GetQueryString("isYemFlt");
	        var isYenFlt=GetQueryString("isYenFlt");
	        var isElsFlt=GetQueryString("isElsFlt");
	        if(isRedFlt == 1&&isRedFlt != null){
	        	var redt = document.getElementById("redt");
				var red = document.getElementById("red");
				redt.value="1"
				red.className="mui-btn mui-btn-primary ";
	        }else if(isRedFlt != 1&&isRedFlt != null){
	        	var redt = document.getElementById("redt");
				var red = document.getElementById("red");
				redt.value="0"
				red.className="mui-btn mui-btn-primary mui-btn-outlined";
	        }
	        
	        if(isYemFlt == 1&&isYemFlt != null){
	        	var redyp = document.getElementById("redyp");
				var yellowp = document.getElementById("yellowp");
				redyp.value="1"
				yellowp.className="mui-btn mui-btn-primary";
	        }else if(isYemFlt != 1&&isYemFlt != null){
	        	var redyp = document.getElementById("redyp");
				var yellowp = document.getElementById("yellowp");
				redyp.value="0"
				yellowp.className="mui-btn mui-btn-primary mui-btn-outlined";
	        }
	        if(isYenFlt == 1&&isYenFlt != null){
	        	var redyn = document.getElementById("redyn");
				var yellown = document.getElementById("yellown");
				redyn.value="1"
				yellown.className="mui-btn mui-btn-primary ";
	        }else if(isYenFlt != 1&&isYenFlt != null){
	        	var redyn = document.getElementById("redyn");
				var yellown = document.getElementById("yellown");
				redyn.value="0"
				yellown.className="mui-btn mui-btn-primary mui-btn-outlined";
	        }
	        if(isElsFlt == 1&&isElsFlt != null){
	        	var redo = document.getElementById("redo");
				var other = document.getElementById("other");
				redo.value="1"
				other.className="mui-btn mui-btn-primary ";
	        }else if(isElsFlt != 1&&isElsFlt != null){
	        	var redo = document.getElementById("redo");
				var other = document.getElementById("other");
				redo.value="0"
				other.className="mui-btn mui-btn-primary mui-btn-outlined";
	        }
			/**  
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					fltpagerCode=1;
					document.getElementById("curtFlt").innerHTML="";
					curtFlt(true);//是否有数据
					//mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //关闭“正在刷新”雪花进度提示
					mui("#pullrefresh").pullRefresh().refresh(true);//重新启动上拉刷新
				}, 1000);
			}
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					fltpagerCode++;
					flagbool=curtFlt(false);//是否有数据
				}, 1000); 
			}
			//处理点击事件，需要打开原生浏览器
			mui('body').on('tap', 'a', function(e) {
				var href = this.getAttribute('href');
				if (href) {
					if (window.plus) {
						plus.runtime.openURL(href);
					} else {
						location.href = href;
					}
				}
			});
			function getredflt(){
				var redt = document.getElementById("redt");
				var red = document.getElementById("red");
				document.getElementById("fltTop").style.webkitTransform= 'translate3d(0px, 0px, 0px) translateZ(0px)'; 
				if(redt.value=="0"){
					redt.value="1"
					red.className="mui-btn mui-btn-primary ";
				}else{
					redt.value="0"
					red.className="mui-btn mui-btn-primary mui-btn-outlined";
				}
				mui("#pullrefresh").pullRefresh().pulldownLoading();
			}
			function getyellpflt(){
				var redyp = document.getElementById("redyp");
				var yellowp = document.getElementById("yellowp");
				document.getElementById("fltTop").style.webkitTransform= 'translate3d(0px, 0px, 0px) translateZ(0px)';
				if(redyp.value=="0"){
					redyp.value="1"
					yellowp.className="mui-btn mui-btn-primary";
				}else{
					redyp.value="0"
					yellowp.className="mui-btn mui-btn-primary mui-btn-outlined";
				}
				mui("#pullrefresh").pullRefresh().pulldownLoading();
			}
			function getyellnflt(){
				var redyn = document.getElementById("redyn");
				var yellown = document.getElementById("yellown");
				document.getElementById("fltTop").style.webkitTransform= 'translate3d(0px, 0px, 0px) translateZ(0px)';
				if(redyn.value=="0"){
					redyn.value="1"
					yellown.className="mui-btn mui-btn-primary";
					
				}else{
					redyn.value="0"
					yellown.className="mui-btn mui-btn-primary mui-btn-outlined";
				}
				mui("#pullrefresh").pullRefresh().pulldownLoading();
			}
			function getotherflt(){
				var redo = document.getElementById("redo");
				var other = document.getElementById("other");
				document.getElementById("fltTop").style.webkitTransform= 'translate3d(0px, 0px, 0px) translateZ(0px)';
				if(redo.value=="0"){
					redo.value="1"
					other.className="mui-btn mui-btn-primary";
				}else{
					redo.value="0"
					other.className="mui-btn mui-btn-primary mui-btn-outlined";
				}
				mui("#pullrefresh").pullRefresh().pulldownLoading();
			}
			 //现行故障
			function curtFlt(isPullDown){
				var f = document.getElementById("curtFlt");
				var type = "4";
				vcltype="4";
				var vclides="";
	       		var lnges ="";
	       	 	var lanes ="";
				var booleanretrue=false;
				isRedFlt=document.getElementById("redt").value;
				isYemFlt=document.getElementById("redyp").value;
				isYenFlt=document.getElementById("redyn").value;
				isElsFlt=document.getElementById("redo").value;
				mui.ajax('../../../APP/curtFlt',{
				data:{param:'{"proVersion":"'+proversion+'","accountId":"'+accountid+'","sessionid":"'+sessionid+'","data":{"type":"'+type+'","isRedFlt":"'+isRedFlt+'","isYemFlt":"'+isYemFlt+'","isYenFlt":"'+isYenFlt+'","isElsFlt":"'+isElsFlt+'","fltpagerCode":"'+fltpagerCode+'","pagerCount":"'+pagerCount+'","pagerStart":"'+pagerStart+'"}}'},
				dataType:'jsonp',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:100000,//超时时间设置为10秒；
				
				success:function(data){
					var jsonObj = window.JSON.parse(data);
					if(jsonObj.resultcode=="1"){
						
						//获取返回数据的data
						var resultdata = jsonObj.data
						if(type=="4"){//故障
								if(resultdata.length>0){
								//获取每台设备的数据
								for(var i=0;i<resultdata.length;i++){
									var flt = "";
									var li = document.createElement('li');
									li.setAttribute("id","id_"+resultdata[i].vclid+"_"+resultdata[i].vclnum+"_"+resultdata[i].isatn);
									li.className="mui-table-view-cell";
									flt+='<div class=" mui-col-xs-10" style="width:100%">'
									flt+='<span><h5 class="mui-ellipsis" style="font-size:16px; color:black;">'+resultdata[i].vclnum+'<p style="display: inline;color:yellowgreen;">'
									
									if(resultdata[i].isatn=="1"){//关注
			  							flt+='<img style="vertical-align:top;width:15px;height;auto" src="../../images/drawable-hdpi/attention.png">';
			  						}
			  						if(resultdata[i].isflt=="1"){//四级故障
			  							flt+='<img style="vertical-align:top;width:15px;height;auto" src="../../images/drawable-hdpi/failure.png">';
			  						}
			  						if(resultdata[i].keysta=="1"){//开机
			  							flt+='<img style="vertical-align:top;width:15px;height;auto" src="../../images/drawable-hdpi/park.png">';
			  						}
			  						flt+='</p></h5></span>';
									flt+='<p class="mui-h6" style="height:auto;width:auto;font-size: 13px;color: grey;" id="d_'+resultdata[i].vclid+'">正在加载...</p>'
									var fltList=resultdata[i].fltlist;
									if(null!=fltList&&fltList.length>0){
										for(var m=0;m<fltList.length;m++){
											flt+='<p class="mui-h6" style="height:auto;width:auto;color:'+fltList[m].fltcolor+' ">'+fltList[m].fltcode+'&nbsp;&nbsp;'+fltList[m].fltrisk+'</p>'
										}
									}
									flt+='</div>' 
									
									vclides+=resultdata[i].vclid+",";
						  			lnges+=resultdata[i].lng+",";
						  			lanes+=resultdata[i].lat+",";
						  			li.innerHTML=flt;
						  			f.appendChild(li);
						  		li.addEventListener("tap",function(){
						  			var vclid = this.getAttribute("id").split("_")[1];
						  			var vclnum=this.getAttribute("id").split("_")[2];
									window.webkit.messageHandlers.cutflt.postMessage(vclid+"_"+vclnum);
						  		});
						  		li.addEventListener("longtap",function(){
						  			var li_vclid = this.getAttribute("id").split("_")[1];
						  			var vclnum=this.getAttribute("id").split("_")[2];
						  			var li_atn=this.getAttribute("id").split("_")[3];
						  			var btnArray = ['取消', '确定'];
									var con = "";
							    	var atnType="";
							    	if(li_atn=="1"){//点击按钮为取消关注
							    		con="取消关注";
							    		atnType="0";
							    	}else{//点击按钮为添加关注
							    		con="添加关注";
							    		atnType="1";
							    	}
							    	mui.confirm('', con, btnArray, function(e) {
										if (e.index == 1) {
											//ajax请求关注接口
											mui.ajax('../../../APP/atnFtn', {
												
												data: {
													param: '{"proVersion":"' + proversion + '","accountId":"' + accountid + '","sessionid":"' + sessionid + '","data":{"vclId":"'+li_vclid+'","type":"'+atnType+'"}}'
												},
												dataType: 'jsonp', //服务器返回json格式数据
												type: 'post', //HTTP请求类型
												timeout: 10000, //超时时间设置为10秒；
												success: function(data) {
													var jsonObj = window.JSON.parse(data);
													if (jsonObj.resultCode == "1") {
														mui.toast("成功");
														mui("#pullrefresh").pullRefresh().pulldownLoading();
													} else {
														mui.toast("失败");
													}
												},
												error: function(xhr, type, errorThrown) {
													}
											});
										} else {
											//mui.toast('你取消了解除绑定');
										}
									});
						  		});
								}
								vclids=vclides
								lngs=lnges
								lans=lanes
								if(true!=isPullDown){
									mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
								}
								getPosition();
						}else{
							if(true!=isPullDown){
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
							}
							
						}
					}else{
						f.innerHTML="请求出错!"+jsonObj.resultcode;
					}
				
					}
					if(true==isPullDown){//下拉刷新，数据加载完成，则关闭”正在加载“
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //关闭“正在刷新”雪花进度提示
						mui("#pullrefresh").pullRefresh().refresh(true);//重新启动上拉刷新
					}
				},
				error:function(xhr,type,errorThrown){
					//异常处理；
					f.innerHTML="error";
					if(true==isPullDown){//下拉刷新，数据加载完成，则关闭”正在加载“
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //关闭“正在刷新”雪花进度提示
						mui("#pullrefresh").pullRefresh().refresh(true);//重新启动上拉刷新
					}
				}
			});
			return booleanretrue;	
			
			}
			function getPosition(){
							mui.ajax('../../../APP/position',{
				data:{param:'{"proVersion":"'+proversion+'","accountId":"'+accountid+'","sessionid":"'+sessionid+'","data":{"vclids":"'+vclids+'","lngs":"'+lngs+'","lans":"'+lans+'"}}'},
				dataType:'jsonp',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				success:function(data){
					var jsonObj = window.JSON.parse(data);
					//document.getElementById("test").innerHTML="bb";
					if(jsonObj.resultcode=="1"){
						//document.getElementById("test").innerHTML=jsonObj.resultcode;
						//获取返回数据的data
						var resultdata = jsonObj.data;
							if(null !=resultdata){
								//document.getElementById("test").innerHTML="chang";
								for(var i=0;i<resultdata.length;i++){
									var arr = resultdata[i];
									//document.getElementById("test").innerHTML=resultdata[i][1];
										document.getElementById("d_"+resultdata[i][0]).innerHTML=resultdata[i][1];
									
								}
							}else{
								//document.getElementById("test").innerHTML="null";
							}
						
					}else{
						//document.getElementById("test").innerHTML="null2";
					}
				},
				error:function(xhr,type,errorThrown){
					//异常处理；
					//document.getElementById("test").innerHTML=="error";
				}
			});
			}
			
		</script>
</html>